<template>
  <div>
    <h2>订单</h2>
    <table border="1" cellspacing='0'>
      <colgroup span="5" width="150px"></colgroup>
      <tr>
        <th>订单号</th>
        <th>商品名称</th>
        <th>商品单价</th>
        <th>购买数量</th>
        <th>合计</th>
      </tr>
      <tr v-for="i in orders" :key="i.id">
        <td>{{i.orderno}}</td>
        <td>{{i.goodname}}</td>
        <td>{{i.price}}</td>
        <td>{{i.num}}</td>
        <td>{{i.price*i.num | toFloat}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orders: [],
      uid: 0
    };
  },
  mounted() {
    this.uid = localStorage.getItem("uid");
    this.axios({
      url: "http://127.0.0.1:8000/app03/order/",
      method: "get",
      params: { uid: this.uid }
    }).then(res => {
      this.orders = res.data.data;
    });
  },
  filters:{
    toFloat:function(val){
      return val.toFixed(2);
    }
  }
};
</script>

<style>
table{
  margin:20px auto;
}
</style>